<template>
    <view class="bar" ref="tabBar">
        <view class="bar__icon" v-if="props.theme=='default'||props.theme=='custom'" @click="goPage(1)">
            <uv-icon name="home" size="30"></uv-icon>
            <text>首页</text>
        </view>
        <view class="bar__icon" v-if="props.theme=='default'" @click="goPage(2)">
            <uv-icon name="e628" size="30" custom-prefix="fx"></uv-icon>
            <text>心理咨询</text>
        </view>
        <view class="bar__icon" v-if="props.theme=='default'" @click="goPage(3)">
            <uv-icon name="chat" size="30"></uv-icon>
            <text>消息</text>
        </view>
        <view class="bar__icon" v-if="props.theme=='default'" @click="goPage(4)">
            <uv-icon name="account" size="30"></uv-icon>
            <text>我的</text>
        </view>
        <view class="bar__icon" v-if="props.theme=='custom'" @click="goPage(5)">
            <uv-icon name="kefu-ermai" size="30"></uv-icon>
            <text>在线客服</text>
        </view>
        <view class="bar__icon" v-if="props.theme=='custom'" @click="goPage(6)">
            <uv-icon name="share" size="30"></uv-icon>
            <text>分享到</text>
        </view>

        <view class="bar__extra" v-if="props.theme=='custom'||props.theme=='none'">
            <slot name="bar"></slot>
        </view>
    </view>
</template>
<script setup lang="ts">
    import { ref, nextTick, getCurrentInstance } from "vue";
    import { defaultTabBarProps, TabBarProps } from "@/props.ts"
    import { onLoad } from "@dcloudio/uni-app"
    const props = withDefaults(defineProps<TabBarProps>(), defaultTabBarProps);
    console.log(34333333, props)
    const goPage = (i) => {
        if (i === 1) {
            uni.navigateTo({
                url: "/pages/home/index"
            })
        }
        if (i === 2) {
            uni.navigateTo({
                url: "/pages/course/index"
            })
        }
        if (i === 4) {
            uni.navigateTo({
                url: "/pages/my/index"
            })
        }
    }

    //const mainContentRef = ref(null);
    //const tabBarRef = ref(null);
    const emit = defineEmits(['tab-bar-height-ready'])
    const inst = getCurrentInstance();
    onLoad(() => {
        nextTick(() => {
            const query = uni.createSelectorQuery().in(inst);
            console.log(11112, query)
            query.select('.bar').boundingClientRect((rect) => {
                console.log(2222, rect);
                if (rect) {
                    emit('tab-bar-height-ready', rect.height);
                    console.log(3, rect.height)

                }
            }).exec();
        })

    });
</script>
<style lang="scss" scoped>
    .bar {
        display: flex;
        position: fixed;
        bottom: 0;
        width: 100%;
        justify-content: space-around;
        background-color: #fff;
        padding: 20rpx 0;
        color: #6e707a;
        box-sizing: border-box;

        &__icon {
            display: flex;
            flex-direction: column;
            align-items: center;
            font-size: 20rpx;
        }

        &__extra {
            display: flex;
            align-items: center;
        }



    }
</style>